<!-- <template>
  <div>
     <a-spin :spinning="spinning">
       <el-row :gutter="20" type="flex" justify="center">
          <el-col :span="15">
            <div v-if="form.formItems">
              <form-render class="process-form" ref="form" :forms="form.formItems" v-model="formData" :key="componentKey" />
            </div>
            <div style="text-align: center;">
              <el-button type="primary" :loading="submitLoading" size="medium" @click="submitForm">提交</el-button>
              <el-button size="medium" :loading="draftLoading" @click="draftForm"
                style="margin-left: 15px;">保存草稿</el-button>
            </div>
          </el-col>
        </el-row> 
     </a-spin>
    <draft-model ref="draftModalForm" @edit="editCallback" @close="closeHandle"></draft-model>
  </div>
</template>

<script>
  import FormRender from "@/views/wflowable/common/form/FormRender";
  import {
    httpAction,
    getAction
  } from '@/api/manage'
  import store from '@/store/'
  import draftModel from "@/views/wflowable/common/form/draft/draftModel"
  export default {
    name: "formTemplate",
    components: {
      FormRender,
      draftModel
    },
    props: {},
    data() {
      return {
        spinning:false,
        loading: false,
        formData: {},
        select: [],
        selectedNode: {},
        processUsers: {},
        draftCount: 0,
        componentKey: 0,
        form: {
          formId: "",
          formName: "",
          logo: {},
          formItems: null,
          process: {},
          remark: "",
        },
        // forms:[],
        flwDraftId: null, //草稿id
        loginUser: {},
        conditionFormItem: new Set(),
        activities: [],
        cc: [],
        submitLoading: false, //提交loading
        draftLoading: false, //保存草稿loading
        templateId: null, //模板id
        url: {
          detail: 'workspace/process/detail',
          formDetail: 'flowable/form/detail',
          start: 'workspace/process/start',
          draftAdd: '/flowable/flwDraft/add',
          draftEdit: '/flowable/flwDraft/edit',
          queryById: '/flowable/flwDraft/queryById',
          count: '/flowable/flwDraft/list/count',
        }
      };
    },
    // watch: {
    //   // 被侦听的变量count
    //   formData: {
    //     // 对对象进行深度监听
    //     handler(nv) {
    //       this.startProcess(nv, (this.cc = []));
    //     },
    //     immediate: true,
    //     deep: true,
    //   },
    // },
    mounted() {},
    computed: {
      // forms() {
      //   return this.$store.state.wflow.design.formItems;
      // },
      _value: {
        get: function() {
          return this.value;
        },
        set: function(e) {
          this.$emit("input", e);
        },
      },
    },
    methods: {
      loadLoginUser() {
        this.loginUser = JSON.parse(sessionStorage.getItem("user"));
      },
      //加载子组件
      getChildrenData(record) {
        this.flwDraftId = null
        this.templateId = record.templateId
        // this.form.formItems = formItems
        this.loadLoginUser();
        this.loadFormInfo(record.formId); //获取表单信息
        this.getFlwDraftCount(record.templateId)
      },
      //获取草稿箱数量
      getFlwDraftCount() {
        getAction(this.url.count, {
            templateId: this.templateId
          })
          .then((res) => {
            if (res.success) {
              this.draftCount = res.result ? res.result : 0
            } else {
              this.$message.warning(res.message)
            }
          })
      },
      //打开草稿箱
      draftHandle() {
        this.$refs.draftModalForm.title = '草稿箱';
        this.$refs.draftModalForm.getDraftList()
      },
      //继续编辑
      editCallback(record) {
        this.activeKey = '1'
        if (record) {
          this.flwDraftId = record.id
          let textJson = JSON.parse(record.text)
          this.form.formItems = textJson.formItems
          this.formData = textJson.formData
          this.componentKey += 1
        }
        //this.getChildrenFlwDraftData(record.id)
      },
      //草稿箱内容
      getChildrenFlwDraftData(id) {
        this.flwDraftId = id
        getAction(this.url.queryById, {
            id: id
          })
          .then((res) => {
            if (res.success) {
              let textJson = JSON.parse(res.result.text)
              this.form.formItems = textJson.formItems
              this.formData = textJson.formData
            } else {
              this.$message.warning(res.message)
            }
          })
      },
      //获取表单详情
      loadFormInfo(formId) {
        this.spinning = true;
        getAction(this.url.detail, {
            templateId: formId
          })
          .then((res) => {
            if (res.success) {
              let form = res.result
              form.logo = JSON.parse(form.logo);
              form.settings = JSON.parse(form.settings);
              form.formItems = JSON.parse(form.formItems);
              form.process = JSON.parse(form.process);
              this.form = form;
              //构建表单及校验规则
              this.$store.state.wflow.design = form;
            } else {
              this.$message.warning(res.message)
            }
          })
          .finally(()=>{
            this.spinning = false
          })
      },
      closeHandle() {
        this.getFlwDraftCount()
      },
      validate(call) {
        this.$refs.form.validate(call);
      },
      getProcessUser() {
        return this.processUsers;
      },
      getForm() {
        return this.form;
      },
      getFormData() {
        return this.formData;
      },
      //提交表单
      submitForm() {
        const that = this
        const formData = this.getFormData();
        const form = this.getForm();
        const processUser = this.getProcessUser();
        that.$refs.form.validate((valid) => {
          if (valid) {
            that.submitLoading = true
            let parma = {
              processDefinitionId: form.processDefinitionId,
              formData,
              processUsers: processUser,
              draftId: that.flwDraftId
            }
            httpAction(that.url.start, parma, 'post')
              .then((res) => {
                if (res.success) {
                  this.$message.success("提交成功");
                  this.openItemDl = false;
                  this.$emit('ok')
                } else {
                  this.$message.warning("请完善表单??");
                }
              })
              .finally(() => {
                that.submitLoading = false
              })
          }
        })
      },
      //保存草稿
      draftForm() {
        const that = this
        const formData = this.getFormData();
        let parmas = {
          externalFormId: that.form.externalFormId,
          formItems: that.form.formItems,
          formName: that.form.formName,
          formId: that.form.formId,
          formType: that.form.formType,
          externalForm: null,
          formData,
        }
        if (!that.flwDraftId) {
          that.addFlwDraft(parmas)
        } else {
          that.editFlwDraft(parmas)
        }
      },
      //新增草稿
      addFlwDraft(parmas) {
        this.draftLoading = true
        httpAction(this.url.draftAdd, {
            templateId: this.form.templateId,
            text: JSON.stringify(parmas)
          }, 'post')
          .then((res) => {
            if (res.success) {
              this.flwDraftId = res.message ? res.message : null
              this.$message.success('保存成功!');
              this.getFlwDraftCount(this.form.templateId)
            } else {
              this.$message.warning(res.message);
            }
          })
          .finally(() => {
            this.draftLoading = false
          })
      },
      //编辑草稿
      editFlwDraft(parmas) {
        this.draftLoading = true
        httpAction(this.url.draftEdit, {
            templateId: this.form.templateId,
            text: JSON.stringify(parmas),
            id: this.flwDraftId
          }, 'put')
          .then((res) => {
            if (res.success) {
              this.$message.success(res.message);
            } else {
              this.$message.warning(res.message);
            }
          })
          .finally(() => {
            this.draftLoading = false
          })
      },


      // selected(e) {
      //   var t = this;
      //   t.processUsers[t.selectedNode.id] = [];

      //   e.forEach((user) => {
      //     var ddd = t.selectedNode.users.findIndex((t) => {
      //       return t.id === user.id;
      //     });
      //     if (ddd === -1) {
      //       t.selectedNode.users.push(user);
      //       t.processUsers[t.selectedNode.id].push(user);
      //       t.$set(e, "isEdit", true);
      //     }
      //   });
      // },
      // getProcess(process, data, cc) {
      //   if (null != process && undefined != process) {
      //     if ("ROOT" === process.type) {
      //       //发起人节点
      //       this.getRootNode(cc, process);
      //     } else if ("APPROVAL" === process.type) {
      //       //审批节点
      //       this.getApprovalNode(cc, process);
      //     } else if ("CC" === process.type) {
      //       this.getCcNode(cc, process);
      //     } else if ("CONDITIONS" === process.type) {
      //       //判断是否符合条件符合走条件分支,否则继续递归子分支
      //       if (null != process.branchs && undefined != process.branchs) {
      //         this.getConditionNode(cc, process);
      //       }
      //     } else if ("CONCURRENTS" === process.type) {
      //       this.getConcurrentNode(cc, process);
      //     }
      //     if (null != process.children && undefined != process.children) {
      //       this.getProcess(process.children, data, cc);
      //     }
      //   }
      // },
      //封装开始节点
      // getRootNode(cc, process) {
      //   cc.push({
      //     id: process.id,
      //     title: process.name,
      //     name: "发起人",
      //     icon: "el-icon-user-solid",
      //     isEdit: false,
      //     users: [this.loginUser],
      //   });
      // },
      //封装审批节点
      // getApprovalNode(cc, process) {
      //   var data = {
      //     id: process.id,
      //     title: process.name,
      //     name: "审批人",
      //     icon: "el-icon-s-check",
      //     isEdit: false,
      //     multiple: false,
      //     mode: process.props.mode,
      //     users: [],
      //     desc: "",
      //   };
      // getConditionResultByGroup: function (e) {
      //   var t = this,
      //     r = !1,
      //     s = 0;
      //   e.conditions.forEach(function (e) {
      //     return t.conditionFormItem.add(e.id);
      //   });

      //   for (var a = 0; a < e.conditions.length; a++) {
      //     var n = e.conditions[a];
      //     switch (n.valueType) {
      //       case "Number":
      //         console.log("这是number类型判断");
      //         r = this.numberCompare(n);
      //         break;
      //       case "String":
      //         console.log("这是string类型判断");
      //         break;
      //       case "Date":
      //         console.log("这是data类型判断");

      //         break;
      //       case "User":
      //         console.log("这是user类型判断");

      //         break;
      //       case "Array":
      //         console.log("这是array类型判断");

      //         break;
      //     }
      //     if (r && "OR" === e.groupType) break;
      //     r && "AND" === e.groupType && s++;
      //   }
      //   return "AND" === e.groupType && (r = s === e.conditions.length), r;
      // },
      // numberCompare: function (e) {
      //   var t = this.formData[e.id];
      //   switch (e.compare) {
      //     case ">":
      //       return t > parseFloat(e.value[0]);
      //     case "<":
      //       return t < parseFloat(e.value[0]);
      //     case "=":
      //       return t === parseFloat(e.value[0]);
      //     case ">=":
      //       return t >= parseFloat(e.value[0]);
      //     case "<=":
      //       return t <= parseFloat(e.value[0]);
      //     case "B":
      //       return t > parseFloat(e.value[0]) && t < parseFloat(e.value[1]);
      //     case "AB":
      //       return t >= parseFloat(e.value[0]) && t < parseFloat(e.value[1]);
      //     case "BA":
      //       return t > parseFloat(e.value[0]) && t <= parseFloat(e.value[1]);
      //     case "ABA":
      //       return t >= parseFloat(e.value[0]) && t <= parseFloat(e.value[1]);
      //     case "IN":
      //       return e.value.indexOf(String(t)) > -1;
      //     default:
      //       return !1;
      //   }
      // },
    },
  };
</script>

<style lang="less" scoped>
  .process-form {
    padding: 20px;

    /deep/ .el-form-item__label {
      padding: 0 0;
    }
  }

  .row_title {
    position: relative;
    margin: 0px 32px;
    padding-bottom: 16px;
    border-bottom: 2px dotted #e5e5ea;
    display: flex;

    .title {
      color: #111f2c;
      font-size: 24px;
      line-height: 32px;
      font-weight: bold;
      padding-right: 40px;
      flex: 1;
      display: flex;
      align-items: center;
    }
  }

  .task {
    height: 60px;
  }

  .show-y {
    justify-content: center;
    flex-direction: column !important;
  }

  .show-y,
  .w-h-center {
    display: flex;
    align-items: center;
  }

  .close {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    background: #000;
  }

  .status {
    position: absolute;
    bottom: -4px;
    right: -8px;
    border-radius: 50%;
    font-size: 15px;
    background: #fff;
    border: 2px solid #fff;
  }

  .line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .border .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }

  /deep/.el-col-15 {
    background: #fff;
    padding: 20px;
    margin: 15px 0;
  }

  /deep/.el-button--medium {
    padding: 13px 45px;
  }
</style> -->